<template lang="pug">
.audit
  .audit-header
    .audit-header-filter
      header-filter(:filter="filter")
  .audit-container
    //- .audit-body-handles
      .audit-filter
        el-button(size="small" type="primary" @click="agree") 审核通过
        el-button(size="small" @click="refuse") 审核拒绝
    .audit-table
      el-table(
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{'fontSize': '14px', 'background': '#F7F7F7', 'color': '#363636'}"
      )
        el-table-column(type="selection" align="center" width="55px")
        el-table-column(label="账号" prop="userName")
        el-table-column(label="昵称" prop="realName")
        el-table-column(label="手机号" prop="mobile")
        el-table-column(label="邮箱" prop="email")
        el-table-column(label="申请时间" prop="applyTime" sortable)
        el-table-column(label="审核状态")
          template(slot-scope="scope")
            .table-item-txt(v-if="scope.row.type == -1") 拒绝
            .table-item-txt(v-if="scope.row.type == 0") 审核中
            .table-item-txt(v-if="scope.row.type == 1") 审核成功
        el-table-column(label="审核操作 ")
          template(slot-scope="scope")
            .table-item-handle.warning(v-if="scope.row.type == 0" @click="handleType(scope.row, 'agree')") 通过
            .table-item-handle.default(v-if="scope.row.type == 0" @click="handleType(scope.row, 'refuse')") 拒绝
            .table-item-txt(v-if="scope.row.roleId === 1") --
      .index-pagination
        .pagination-total 共 {{total}} 条
        .pagination-sizes 10 条/页
        el-pagination(
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="currentChange"
        )
</template>

<script>
import { getPersonCompanyAuthList, postHandlerInvite } from 'api'
import headerFilter from '@/components/headerFilter'
export default {
  name: 'audit',
  components: {
    headerFilter
  },
  data () {
    return {
      filter: [
        [
          {
            name: '搜索：',
            type: 'default',
            key: 'searchContent',
            searchContent: '',
          },
          {
            type: 'handle',
            buttons: [
              { name: 'primary', label: '查询', handle: this.search },
              { label: '重置', handle: this.reset }
            ]
          }
        ]
      ],
      list: [],
      selections: [],
      total: 0,
      page: 1,
      pageSize: 10,
    }
  },
  methods: {
    agree () {},
    refuse () {},
    handleSelectionChange (selection) {
      this.selections = selection
    },
    search () {
      let query = {}
      this.filter.map(row => row.map(v => {
        if (v[v.key]) query[v.key] = v[v.key]
      }))
      Object.keys(query).forEach(v => {
        if (!query[v]) delete query[v]
      })
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    reset () {
      this.$router.replace({ name: this.$route.name })
    },
    async initFilter () {
      try {
        this.filter.forEach(row => row.forEach(v => {
          v[v.key] = this.$route.query[v.key] || ''
        }))
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    currentChange (page) {
      this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, currentPage: page, tm: new Date().getTime() } })
    },
    async handleType (row, status) {
      try {
        let query = { id: row.id }
        if (status === 'agree') query.type = 1
        else query.type = -1
        await this.$axios.post(postHandlerInvite, { content: { ...query } })
        this.$message.success('审核成功！')
        this.getList()
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getList () {
      try {
        let query = { ...this.$route.query, currentPage: this.$route.query.currentPage || 1, pageSize: this.pageSize }
        const { ResultSet } = await this.$axios.post(getPersonCompanyAuthList, { content: { ...query } })
        this.page = parseInt(this.$route.query.currentPage)
        this.list = ResultSet.userData.data
        this.total = ResultSet.userData.totalSize
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
      vm.initFilter()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getList()
    this.initFilter()
  }
}
</script>

<style lang="scss" scoped>
.audit {
  padding: 0 32px 16px;
}
.audit-header {
  padding: 32px 24px 16px;
  background: #FFFFFF;
  border-radius: 4px;
}
// 
.audit-container {
  margin-top: 16px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.audit-body-handles {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.audit-table {
  margin-top: 16px;
}
.index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
.table-item-handle {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
  margin-right: 8px;
  &.default {
    background: #F6F6F9;
    color: #3E4373;
  }
  &.warning {
    background: #FDEFF1;
    color: #FF2E42;
  }
}
</style>